<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>教学视频</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			h5 {
				padding-top: 8px;
				padding-bottom: 8px;
				text-indent: 12px;
			}
			
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
				font-size: 15px;
				margin-top: 8px;
				color: #333;
			}
			
			.img1 {
				width: 100%;
				height: 128px;
				no-repeat center
			}
			
			.img2 {
				/*width:24px;
				height: 24px;*/
				margin-left: 10px;
				margin-top: 100px;
			}
			
			.Videotitle {
				text-align: left !important;
			}
			
			.num {
				font-size: smaller;
				font-family: "微软雅黑";
			}
		</style>
	</head>

	<body>
		<!--<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">教学视频</h1>
		</header>-->
		<div class="mui-content" style="background-color:#fff">
			<!--<h5 style="background-color:#efeff4">视频教学</h5>-->
			<ul id="list" class="mui-table-view mui-grid-view" style="cursor: pointer">

			</ul>
			<!--模板-->
			<li id='model' vurl="{{vurl}}" style="display: none;" class="mui-table-view-cell mui-media mui-col-xs-6 Videotitle" onclick="vPlay('{{vurl}}','{{img}}','{{title}}')">
				<a href="#" vurl="{{vurl}}">
					<div class="img1" style="background:url({{img}});no-repeat center;background-size: contain;">
						<img class="img2" src="../images/play.png"><span class="num">{{click}}</span></div>
					<div class="mui-media-body Videotitle">{{title}}</div>
				</a>
			</li>
			<!--模板结束-->
		</div>

		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/h.js"></script>
		<script type="text/javascript" src="../js/Common.js"></script>
		<script>
			mui.init({
				statusBarBackground: '#f7f7f7'
			});

			mui.getJSON('http://www.99990158.com/ajax/GetArticlePageList.aspx', { page: 1, size: 2000, cid: 119, channel: 'edu', sort: 'add_time desc' }, function(res) {

				var modelNode = document.getElementById('model').cloneNode(true);
				modelNode.style.display = "";
				var modelHtml = modelNode.outerHTML;
				var lis = [];
				mui.each(res.data, function(index, item) {

					var html = modelHtml.replace(/{{img}}/g, 'http://www.99990158.com' + item.img_url);
					html = html.replace('{{click}}', item.click);
					html = html.replace(/{{title}}/g, item.title);
					html = html.replace(/{{vurl}}/g, 'http://www.99990158.com' + item.video_src);
					lis.push(html);

				});
				document.getElementById('list').innerHTML = lis.join(' ');

				//console.log(document.getElementById('list').innerHTML);
			});

			function vPlay(url, img, title) {

				console.log(url);
				openWindowWithTitle('vplay.html?url=' + url + '&img=' + img, "" + title);
				return;

				var Intent = plus.android.importClass("android.content.Intent");
				var Uri = plus.android.importClass("android.net.Uri");
				var main = plus.android.runtimeMainActivity();
				var intent = new Intent(Intent.ACTION_VIEW);
				var uri = Uri.parse('http://live.99990158.com:809/黄金为什么能避险_clip.mp4');
				intent.setDataAndType(uri, "video/*");
				main.startActivity(intent);

				return;

				if(flvjs.isSupported()) {
					var videoElement = document.getElementById('videoElement');
					var flvPlayer = flvjs.createPlayer({
						type: 'flv',
						url: 'http://live.99990158.com:809/黄金为什么能避险_clip.mp4'
					});
					flvPlayer.attachMediaElement(videoElement);
					flvPlayer.load();
					flvPlayer.play();
				}
			}
		</script>

		<!--<script type="text/javascript" src="../js/flv.min.js"></script>
		<video id="videoElement" style="width: 100%;height: 200px;"></video>
		<script>
			if(flvjs.isSupported()) {
				var videoElement = document.getElementById('videoElement');
				var flvPlayer = flvjs.createPlayer({
					type: 'flv',
					url: 'http://live.99990158.com:809/黄金为什么能避险_clip.mp4'
				});
				flvPlayer.attachMediaElement(videoElement);
				flvPlayer.load();
				flvPlayer.play();
			}
		</script>-->
	</body>

</html>